<template>
  <div>
    <p>{{ name }}--{{ age }} --<button @click="age++">年龄增加</button></p>
    <!-- <p>{{ girlname }}</p> -->
    <p>{{ girlFriend.name }}</p>
  </div>
</template>

<script>
import { reactive, toRef, toRefs } from "vue";
//toRef 可以实现将对象中的深层次得数据实现响应式 (需要单独一个一个的变成响应式)
// 语法: let 变量名 = toRef(要处理对象,'要实现响应式的属性')
//toRefs 可以将对象中深层次的数据实现响应式 (全局响应式)
// 语法: toRefs(要处理的对象)
export default {
  name: "",
  props: [""],
  data() {
    return {};
  },
  setup() {
    let user = reactive({
      name: "王迪",
      age: 20,
      girlFriend: {
        name: "小张",
        age: 18,
        salary: 15000,
      },
    });

    // let name = toRef(user, "name");
    // let age = toRef(user, "age");
    // let girlname = toRef(user.girlFriend, "name");
    user = toRefs(user);
    return {
      //   name,
      //   age,
      //   girlname,
      ...user,
    };
  },
};
</script>
<style scoped>
</style>